<template>
  <div class="tab">
    <el-tag
      :key="tag.label"
      v-for="tag in dynamicTags"
      :closable="tag.label !== 'home'"
      :disable-transitions="false"
      @close="handleClose(tag)"
      @click='changeMenu(tag)'
      :effect="$route.name===tag.label?'dark':'plain'"
    >
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      inputVisible: false,
      inputValue: "",
    };
  },
  methods: {
    //vuex提供的语法糖，映射为this.closeTag(param)=this.$emit('closeTag',param)
    ...mapMutations({
      closeTag: "closeTag",
    }),
    handleClose(tag) {
      this.closeTag(tag);
    },
    changeMenu(tag){
         //.catch(err => err)是为了对点击2次路由报错的解决方法
        this.$router.push(tag.label).catch(err => err);
        this.$store.commit('selectMenu',tag);
    }
  },
  computed: {
    ...mapState({
      dynamicTags: (state) => state.tab.tabList,
    }),
  },
};
</script>

<style lang="scss" scoped>
.el-tag {
  cursor: pointer;
  margin-right: 10px;
}
.tab{
  margin-top: 10px;
  margin-left: 20px;
}
</style>
